<template>
	<div class="test-table-wrap">
		<base-table-data :table-data="tableData" :config="tableConfig">
			<template #dateHeaderSolt={label,property}>
				<div text="bg blue">{{label}} -- {{property}}</div>
			</template>
			<template #addressSolt={row,val,index}>
				<div text="bg blue">{{val}}</div>
				<!-- {{row}}--{{val}} -- {{index}} -->
			</template>
		</base-table-data>
	</div>
</template>

<script setup>
import {ref,onMounted,computed} from 'vue'
	const tableConfig = ref({
		tableProp:{
			showIndex: true,//是否显示行序号
			selectionType: '',//单选 radio，多选 multiple,空
			height: 'auto',
			width: '100%',
			stripe: true,
			border: true,
			tableLayout: 'auto',
			rowKey:'id',//行数据唯一键，例如主键id
			//开启单选或者多选之后，某一行是否可选,true=可选,false不可选
			selectable:(row,index) =>{
				// console.log('selectable',row,index);
				return index%2===0;
			}
		},
		columns:[
				{prop:'date',label:'日期',width:100,minWidth:100,fixed:true,sortable:false,headerSoltName:'dateHeaderSolt'}
				,{prop:'name',label:'名字',minWidth:100,
				formatter:(row,column)=>{
					// console.log('格式化了',row,column)
					return row[column.property]+',格式化了'
					}
				}
				,{prop:'address',label:'地址',width:100,minWidth:100,fixed:false,sortable:true,soltName:"addressSolt"}
			],
		actions:[
			{label:'编辑',type:'default',click:(row,index)=>{alert('打开编辑页面...')}},
			{label:'删除',type:'danger',click:(row,index)=>{alert('打开删除确认弹窗...')}}
		]
	})
	const tableData = ref([])
	onMounted(()=>{
		for (var i = 0; i < 2; i++) {
			tableData.value.push({id:i,date: '2016-05-03',name: 'Tom'+i,address: 'No. 189,',})
		}
	})
</script>

<style>
</style>